<!--收银台-->
<template>
  <div class="app-container cashier-container">
    <NavBar title="收银台" :left="false" />
    <div class="has-nav-bar">
      <div class="cashier-title">
        <van-icon name="cash-back-record-o" />
        <div class="title">账号充值</div>
      </div>
      <van-grid :column-num="4" class="cashier-money-list">
        <van-grid-item v-for="value in 4" :key="value" icon="bill-o" @click="handleCreateOrder(0.01*value)">
          <template slot="text">
            <div class="item">
              {{ 0.01*value }}<span class="unit">元</span>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
      <div style="overflow: auto;  display: flex;flex-direction: column;">
        <van-tabs v-model="activeTab">
          <van-tab title="充值记录" name="order" />
          <van-tab title="充值流水" name="payment" />
          <van-tab title="申请退款" name="refundOrder" />
          <van-tab title="退款流水" name="refundTrade" />
        </van-tabs>
        <div style="flex:1;overflow: auto; margin-top: 20px;">
          <component :is="activeTab" @doPay="handleDoPay" />
        </div>
      </div>
      <pay ref="pay" title="账号充值" @payNotify="handlePayNotify" />
    </div>
  </div>
</template>
<script>
import Pay from '@/views/components/pay.vue'
import payment from './payment.vue'
import order from './order.vue'
import refundOrder from './refundOrder'
import refundTrade from './refundTrade'
export default {
  components: { Pay, order, payment, refundOrder, refundTrade },

  data() {
    return {
      activeTab: 'order'
    }
  },
  created() {

  },
  methods: {
    handleCreateOrder(price) {
      this.$store.dispatch('businessCreateRechargeOrde', {
        orderName: '账号充值',
        price: price
      }).then(response => {
        this.msgSuccess('订单创建成功,去支付！')
        this.handleDoPay(response)
      }).catch(() => {
      })
    },
    handleDoPay(orderId) {
      this.$refs.pay.init(orderId)
    },
    handlePayNotify(val) {
      console.log(val)
    }
  }
}
</script>
<style lang="scss" scoped>
  .cashier-container{
    padding: 10px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .cashier-title{
      display: flex;
      flex-direction: row;
      margin-bottom: 20px;
      .title{
        height: 21px;
        font-size: 16px;
        font-weight: bolder;
        color: #000000;
        line-height: 16px;
        margin-left: 5px;
      }
      i{
        font-size: 17px;
      }
    }
    .cashier-money-list{
      .item{
        color: #1890ff;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        margin-top: 8px;
        .unit{
          font-size: 12px;
          color: #999999;
          font-weight: normal;
          margin-left: 5px;
        }
      }
    }
  }
</style>
